<template>
    <div class="top">
        <div class="left">
            <el-icon :size="16">
            </el-icon>
            <span>筛选搜索</span>
            <el-icon>
                <Search />
            </el-icon>
            <div class="inputspan">
                <el-icon>
                    <Memo />
                </el-icon>
                <span>活动名称：</span>
                <el-input type="text" label="活动名称：" placeholder="请输入用户名"></el-input>
            </div>
        </div>
        <div class="right">
            <el-button type="primary">查询搜索</el-button>
        </div>
    </div>
    <div>
        <div class="center">
            <div class="left">
                <el-icon>
                </el-icon>
                <span>数据列表</span>
            </div>
            <div class="right">
                <el-button @click="goFlashSession">秒杀时间段列表</el-button>
                <el-button @click="onadd">添加活动</el-button>
            </div>
        </div>
    </div>
    <div class="bottom">
        <!-- 数据的展示 -->
        <el-table :data="tableData" style="width: 100%" :border="true">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="编号" width="100">
                <!-- <div>{{ }}</div> -->
            </el-table-column>
            <el-table-column prop="title" label="活动标题" width="250">
            </el-table-column>
            <el-table-column prop="活动未开始" label="活动状态" width="180">
            </el-table-column>
            <el-table-column label="开始时间" width="250">
                <template #default="scope">
                    {{ scope.row.startDate
                        ? dayjs(scope.row.startDate
                        ).format('YYYY-MM-DD HH:mm:ss') : '' }}</template>
            </el-table-column>

            <el-table-column label="结束时间" width="250" flex="right">
                <template #default="scope">
                    {{ scope.row.endDate
                        ? dayjs(scope.row.endDate
                        ).format('YYYY-MM-DD HH:mm:ss') : '' }}</template>
            </el-table-column>
            <el-table-column prop="status" type="switch" label="上线/下线" width="180" flex="right">
                <template #default="scope">
                    <el-switch @change="onchange" :value="scope.row.status === 1 ? true : false" />
                </template>
            </el-table-column>
            <el-table-column label="操作" width="280" flex="right">
                <template #default="scope">
                    <el-button @click="szsp(scope.row.id)" type="text" size="small">设置商品</el-button>
                    <el-button @click="bjsp" type="text" size="small">编辑</el-button>
                    <el-button @click="scsp" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination v-model:current-page="pagination.pageNum" v-model:page-size="pagination.pageSize" background
            :page-sizes="[1, 5, 10, 20]" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <!-- 对话框 -->
    <Edit :visible="visible" @cancel="oncancel
    "></Edit>
</template>
<script setup lang="ts">
import * as api from '../../json/request/api'
import { ref, reactive, unref, toRaw, toRefs } from 'vue'
import { h } from 'vue'
import type { sxdata } from '../../json/request/QmsAdminConreiller/index'
import useTable from '../../hooks/useTables'
import type { IAdminMsRes, IAdminmsList } from '../../json/request/QmsAdminConreiller/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import { forEach } from 'lodash'
import Edit from './Edit.vue'
import router from '../../router'
import dayjs from 'dayjs'
// 对话框显示与隐藏
let visible = ref(false)
// 添加活动
let onadd = () => {
    visible.value = true
}
// 取消 
let oncancel = () => {
    visible.value = false
}
let { tableData, getTableData, pagination, handleSizeChange, handleCurrentChange } = useTable(api.admin.adminmsList, {
    // keyword: name
})
console.log(tableData);
getTableData()
// 设置商品
let szsp = (id: number) => {
    router.push(`/sms/selectSession?id=${id}`)
}
// 编辑商品
let bjsp = () => {
    ElMessageBox({
        title: '添加活动',
        message: h('p', null, [
            h('span', null, 'Message can be '),
            h('i', { style: 'color: teal' }, 'VNode'),
        ]),
        showCancelButton: true,
        confirmButtonText: 'OK',
        cancelButtonText: 'Cancel',
        beforeClose: (action, instance, done) => {
            if (action === 'confirm') {
                instance.confirmButtonLoading = true
                instance.confirmButtonText = 'Loading...'
                setTimeout(() => {
                    done()
                    setTimeout(() => {
                        instance.confirmButtonLoading = false
                    }, 300)
                }, 3000)
            } else {
                done()
            }
        },
    }).then((action) => {
        ElMessage({
            type: 'info',
            message: `action: ${action}`,
        })
    })
}
// 删除商品
let scsp = () => {

}
// 上线和下线
// let data = unref(tableData)
let tableData1 = reactive(tableData)
let data = JSON.parse(JSON.stringify(tableData1))
// console.log(data);
console.log(tableData1);
console.log(data);

// let DATA = toRefs(tableData)
// console.log(DATA);
let onchange = async (data: any) => {
    // tableData.status = 0
    // await api.admin.changeSX(data.id, data.status)
    // console.log(111);

    // console.log(tableData);

}
// 进入秒杀时间段列表
let goFlashSession = () => {
    router.push('./flashSession')
}
</script>
<style scoped lang="scss">
.inputspan {
    display: flex;
    align-items: center;
    transform: translateX(25px);

    span {
        transform: translateX(30px);
        width: 100px;
    }
}

.top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 35px;
    // border: 1px solid red;
    box-shadow: 2px 2px 5px rgb(233, 219, 219);
    background-color: rgb(255, 255, 255, 0.8);

    .left {

        // padding: 20px;
        .el-icon {
            margin: 0px 10px 35px 0;
            transform: translateY(2px);
        }

        span {
            font-size: 14px;
        }

        .el-input {
            transform: translateX(35px);
        }

        // padding: 20px;
    }
}

.center {
    display: flex;
    justify-content: space-between;
    padding: 15px;
    align-items: center;
    box-shadow: 2px 2px 5px rgb(233, 219, 219);

    .left {
        .el-icon {
            transform: translate(18px, 3px);
            margin-right: 28px;

        }

        span {
            font-size: 14px;
        }
    }

    .right {
        .el-button {
            transform: translateX(-20px);
        }
    }
}

.bottonm {
    .el-table-column {
        .el-button {
            border: 0;

        }
    }
}
</style>